<template>
  <div class="login_container">
    <!-- 导航栏区域 -->
    <van-nav-bar title="登录">
      <van-icon
        class="goBack"
        slot="left"
        name="cross"
        @click="$router.back()"
      />
    </van-nav-bar>
    <!-- 表单区域 -->
    <van-form
      @submit="onSubmit"
      ref="login_FormRef"
    >
      <van-field
        v-model=" login_FormData.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="login_FormRules.mobile"
      >
        <!-- 这里使用vant自定义的图标  来设置输入框前面的图标  这里用到了插槽-->
        <i
          slot="left-icon"
          class="toutiao toutiao-shouji"
        ></i>
      </van-field>
      <van-field
        v-model=" login_FormData.code"
        name="code"
        placeholder="请输入验证码"
        :rules="login_FormRules.code"
      >
        <!-- 这里使用vant自定义的图标  来设置输入框前面的图标 这里用到了插槽-->
        <i
          slot="left-icon"
          class="toutiao toutiao-yanzhengma"
        ></i>
        <!-- 插入发送验证码的按钮,这里也用到了插槽  下面是新版本的插槽方法-->
        <template #button>
          <!-- 在这里放个倒计时 -->
          <van-count-down
            v-if="isCountDown"
            :time="time"
            format="ss 秒"
            @finish="countDownEnd"
          />
          <van-button
            v-else
            class="send-sms-btn"
            round
            size="small"
            type="default"
            native-type="button"
            @click="sendSms"
          >发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button
          class="login_btn"
          block
          type="info"
          native-type="submit"
        >Login</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
// 导入login请求的组件
import { login, getSms } from '@/api/user'

export default {
  // 组件名称
  name: 'loginIndex',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      // 表单的数据
      login_FormData: {
        mobile: '',
        code: ''
      },
      // 表单的验证规则
      login_FormRules: {
        // 手机号的验证规则
        mobile: [{ required: true, message: '请填写手机号啊!' }, {
          // 对手机号的正则验证
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }
        ],
        // 验证码的验证规则
        code: [{ required: true, message: '请填写验证码啊!' }, {
          pattern: /^\d{6}$/,
          message: '验证码格式错误!'
        }]
      },
      // 倒计时的相关数据
      time: 1000 * 10,
      // 控制倒计时的显示与隐藏  默认的值为false  即是为隐藏的状态
      isCountDown: false
      // tudo....
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 监听登录按钮的点击事件
    onSubmit: async function () {
      // 轻弹框的提示
      this.$toast.loading({
        // duration: 0, 值为0的时候,一直转圈 ,知道遇到 $toast.success()或者 $toast.fail() 才会停止
        message: '正在登录,请稍等...',
        forbidClick: true// 禁止背景点击
      })
      // 在这里用到了try catch方法  配合async和await的使用
      try {
        // 调接口 try里面是成功的操作
        const { data } = await login(this.login_FormData)
        this.$toast.success('登录成功!')
        // 完成token的赋值操作
        this.$store.commit('setLoginToken', data.data)
        // 登录成功，跳转回原来页面
        this.$router.back()
      } catch (error) {
        //  catch里面是失败的操作
        if (error.response.status === 400) {
          this.$toast.fail('手机号或验证码错误!')
        } else {
          this.$toast.fail('请稍后再试! 未知的错误!')
        }
      }
    },
    // 发送验证码按钮的相关处理函数
    sendSms: async function () {
      // 点击发送验证码按钮的预校验操作
      try {
        await this.$refs.login_FormRef.validate('mobile')// 返回的是一个promise对象
        console.log('验证成功!')
      } catch (err) {
        console.log('验证失败!', err)
      }
      // 显示倒计时 验证通过的时候显示出来
      this.isCountDown = true
      //  验证通过之后,就要发送调用发送验证码的接口请求了
      try {
        const res = await getSms(this.login_FormData.mobile)
        this.$toast('发送成功!')
        console.log(res)
      } catch (error) {
        if (error.response.status === 429) {
          // 发送失败的时候,也要关闭倒计时
          this.isCountDown = false
          return this.$toast('发送频繁,请稍后再试!')
        } else {
          return this.$toast('未知的错误!')
        }
      }
    },
    // 倒计时结束的时候触发
    countDownEnd: function () {
      this.isCountDown = false
    }
    // tudo...
  }
}
</script>

<style scoped lang="less">
// 给输入框左边的图标设置样式
.toutiao {
  font-size: 37px;
}
// 发送验证码按钮的相关样式
.send-sms-btn {
  width: 152px;
  height: 46px;
  background-color: #ededed;
  color: #666666;
  padding: 0;
  font-size: 22px;
  line-height: 46px;
}
// 底部登录按钮的相关样式
.login-btn-wrap {
  padding: 53px 33px;
  .login_btn {
    background-color: #6db4fb;
    border: none;
  }
}
// 返回按钮的样式
.goBack {
  color: white;
}
</style>
